<template>
  <div class="container flex-column">
    <div class="tool-box  flex-between">
      <div class="left flex-box">
        <div class="flex-box">
          <span>系统模块</span>
          <el-input type="text" v-model="query.deviceName"></el-input>
        </div>
        <div class="flex-box">
          <span>操作人员</span>
          <el-input type="text" v-model="query.deviceName"></el-input>
        </div>
        <div class="flex-box ">
          <span>操作时间</span>
          <el-date-picker
            v-model="query.daterange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
          </el-date-picker>
        </div>

      </div>
      <div class="right flex-box">
        <el-button plain icon="el-icon-search" @click="page.currentPage = 1;onLoad(page)">搜索</el-button>
        <el-button plain  type="danger" icon="el-icon-delete" @click="searchReset">清空</el-button>
      </div>

    </div>
    <div class="m-table">
      <el-table header-cell-class-name="table-header"
                height="250"
                row-class-name="pointer"
                v-loading="loading"
                @row-click="rowClick"
                :data="data" stripe
                style="width: 100%">
        <el-table-column
          type="index"
          width="100"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="serviceId"
          label="服务id"
        >
        </el-table-column>
        <el-table-column
          prop="serverHost"
          label="服务host"
        >
        </el-table-column>
        <el-table-column
          prop="serverIp"
          label="服务ip"
        >
        </el-table-column>
        <el-table-column
          prop="env"
          label="软件环境"
        >
        </el-table-column>

        <el-table-column
          prop="title"
          label="日志名"
        >
        </el-table-column>
        <el-table-column
          prop="method"
          label="请求方法"
        >
        </el-table-column>

        <el-table-column
          prop="requestUri"
          label="请求接口"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="日志时间"
        >
        </el-table-column>


      </el-table>
      <div class="page">
        <el-pagination
          @current-change="currentChange"
          :current-page="page.currentPage"
          :page-size="page.pageSize"
          layout="total,  prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </div>
  </div>
<!--  <basic-container>-->
<!--    <avue-crud :option="option"-->
<!--               :data="data"-->
<!--               ref="crud"-->
<!--               v-model="form"-->
<!--               :permission="permissionList"-->
<!--               :before-open="beforeOpen"-->
<!--               :page="page"-->
<!--               @search-change="searchChange"-->
<!--               @search-reset="searchReset"-->
<!--               @current-change="currentChange"-->
<!--               @size-change="sizeChange"-->
<!--               @on-load="onLoad">-->
<!--    </avue-crud>-->
<!--  </basic-container>-->
</template>

<script>
  import {getApiList, getApiLogs} from "@/api/logs";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        form: {},
        selectionList: [],
        query: {},
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        option: {
          height: 'auto',
          calcHeight: 210,
          searchShow: true,
          searchMenuSpan: 6,
          tip: false,
          border: true,
          index: true,
          viewBtn: true,
          editBtn: false,
          addBtn: false,
          delBtn: false,
          menuWidth: 120,
          dialogType: 'drawer',
          column: [
            {
              label: "服务id",
              prop: "serviceId",
              search: true
            },
            {
              label: "服务host",
              prop: "serverHost",
              search: true
            },
            {
              label: "服务ip",
              prop: "serverIp"
            },
            {
              label: "软件环境",
              prop: "env"
            },
            {
              label: "日志名",
              prop: "title"
            },
            {
              label: "请求方法",
              prop: "method"
            },
            {
              label: "请求接口",
              prop: "requestUri"
            },
            {
              label: "日志时间",
              prop: "createTime"
            },
            {
              label: "用户代理",
              prop: "userAgent",
              span: 24,
              hide: true
            },
            {
              label: "请求数据",
              prop: "params",
              type: "textarea",
              span: 24,
              minRows: 2,
              hide: true
            }
          ]
        },
        data: []
      };
    },

    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          viewBtn: this.vaildData(this.permission.log_api_view, false)
        };
      }
    },
    methods: {
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getApiLogs(this.form.strId).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      onLoad(page) {
        let params = {};
        if(this.query.daterange&&this.query.daterange.length && this.query.daterange[0]){
          params.startCreateTime = this.query.daterange[0]
          params.endCreateTime = this.query.daterange[1]
        }
        getApiList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
        });
      }
    },
    mounted() {
      this.onLoad(this.page.currentPage)
    }
  };
</script>

<style>
</style>
